<template>
  <div>

    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">首页</el-menu-item>
      <el-submenu index="2">
        <template slot="title">工作台</template>
        <el-menu-item index="2-1">编辑</el-menu-item>
        <el-menu-item index="2-2" @click="toM12Blog">文章</el-menu-item>
        <el-menu-item index="2-3">项目</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">GIT</template>
          <el-menu-item index="2-4-1">Github</el-menu-item>
          <el-menu-item index="2-4-2">Gitee</el-menu-item>
          <el-menu-item index="2-4-3">本地</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3">消息中心</el-menu-item>
      <el-menu-item index="4">近期任务</el-menu-item>
      <el-menu-item style="width: 300Px;position:absolute;right:0;">
        <el-input placeholder="请输入内容" v-model="input5" class="input-with-select">

          <el-button slot="append" icon="el-icon-search" @click="toM12Blog"></el-button>
        </el-input>
      </el-menu-item>
    </el-menu>

    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
             :collapse="isCollapse">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-document"></i>
          <span slot="title">b l o g</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1">Golang</el-menu-item>
          <el-menu-item index="1-2">C sharp</el-menu-item>
          <el-menu-item index="1-3">J a v a</el-menu-item>
          <el-menu-item index="1-4">Python</el-menu-item>
          <el-menu-item index="1-6">Node.js</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span slot="title">新随笔</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1">MarkDown</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item index="3">
        <i class="el-icon-location"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>


    <div class="myBlog">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="标题 :">
          <el-input v-model="formInline.title" placeholder="标题"></el-input>
        </el-form-item>
        <el-form-item label="标签 :">
          <el-select v-model="formInline.label" placeholder="标签">
            <el-option label="Golang" value="Golang"></el-option>
            <el-option label="Vue.js" value="Vue.js"></el-option>
            <el-option label="C#    " value="C#    "></el-option>
            <el-option label="Java  " value="Java  "></el-option>
            <el-option label="Python  " value="Python  "></el-option>
            <el-option label="Node.js  " value="Node.js  "></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="open">提交</el-button>
        </el-form-item>
      </el-form>

    </div>
    <div class="mavonEditor">
      <!--:toolbarsFlag=false 不显示工具栏  defaultOpen = "preview" 默认预览 -->
      <mavon-editor
        :subfield=false
        :boxShadow="false"
        style="min-height: 700px"
        v-model="value"
        ref=md
        :ishljs="true"
        @imgAdd="$imgAdd"
        @imgDel="$imgDel"
      ></mavon-editor>
    </div>

  </div>
</template>

<script>
  export default {
    name: "about",
    data() {
      return {

        value: '# Hello World!',
        tabPosition: 'top',
        isCollapse: false,
        formInline: {
          title: '',
          label: '',

        },

      }

    },
    mounted: function () {
      this.init()
    },
    methods: {
      /*init() {
        let that = this;
        let formData = new FormData();
        formData.append("test", "0");
        that.axios({
          url: '/api/initVue',
          method: 'post',
          data: formData,

        }).then(function (response) {
          if (response.status === 200) {
            let m12 = response.data.m12status;
            console.log("初始化", m12);
            if (m12 === 403) {
              that.$router.push({path: '/login'});
            }
          }
        });
      },*/
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      toM12About: function () {
        let that = this;
        that.$router.push({path: '/about'});
      },
      toM12Blog: function () {
        let that = this;
        that.$router.push({path: '/blog'});
      },
      toM12Home: function () {
        let that = this;
        that.$router.push({path: '/'});
      },
      toM12Insp: function () {
        let that = this;
        that.$router.push({path: '/Inspiration'});
      },
      toM12ME: function () {
        let that = this;
        that.$router.push({path: '/contactMe'});
      },
      toIndex: function () {
        let that = this;
        that.$router.push({path: '/'});
      },
      onSubmit() {
        let that = this;
        let vm = this.$refs.md;
        if (that.formInline.title != '' && that.formInline.label != '' && that.value != '') {
          console.log(that.formInline.title, that.formInline.label, that.value);
          let formData = new FormData();
          formData.append('title', that.formInline.title);//转义 . /  * ( ) ....
          formData.append('label', encodeURIComponent(that.formInline.label));
          formData.append('value', encodeURIComponent(that.value))
          that.axios({
            url: '/api/mongoInsert',
            method: 'post',
            data: formData,
            headers: {'Content-Type': 'multipart/form-data'},
          }).then(function (response) {
            console.log("风里雨里，服务器守护你~");
            if (response.status === 200) {
              console.log("火箭收到~");
              vm.defaultOpen = "preview";
              //that.value = response.data.mongoID  +" \n "  +that.value
              //return vm.defaultOpen
            }
          })
        } else {
          error
        }
      },
      open() {
        this.$confirm('确认提交内容, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.onSubmit();
          this.$message({
            type: 'success',
            message: '提交成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消或填写不完整~'
          });
        });
      },
     $imgAdd(pos, $file) {
        let vm = this.$refs.md;
        let that = this;
        //上传到服务器
        let formData = new FormData();
        formData.append('image', $file);
        //formData.append('data','hello');
        //console.log($file)
        that.axios({
          url: '/api/upload',
          method: 'post',
          data: formData,
          headers: {'Content-Type': 'multipart/form-data'},
        }).then(function (response) {
          console.log("============");
          let tempUrl;
          if (response.status === 200) {

            tempUrl = response.data.ImgUrl;
            console.log(tempUrl);
            vm.$img2Url(pos, tempUrl);
          }
        })

      },
      $readModel(status, value) {
        let vm = this.$refs.md;
      }
      ,
      $imgDel(filename) {
       console.log("这是一个消息")
        let vm = this.$refs.md;
        let that = this;
        console.log("我删除了一张图片", filename[1]);
        let formData = new FormData();
        formData.append("fileUrl", filename[1]);
        that.axios({
          url: '/api/delete',
          method: 'post',
          data: formData,
          headers: {'Content-Type': 'multipart/form-data'},
        })

      }
    },
  }


</script>

<style scoped>

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 16%;
    min-height: 400px;
  }

  .myBlog {
    position: absolute;
    left: 20%;
    top: 10%;
  }

  .mavonEditor {
    width: 80%;
    min-height: 500px;
    top: 15%;
    margin-left: 18%;
    margin-right: 2%;
    position: absolute;
  }
</style>
